<template>
  <div>
    <div class="top">
      <img src="./src/img/login-fs.png" alt="" class="img-top" />
    </div>
    <div class="bottom">
      <img src="./src/img/login.png" alt="" class="img-bottom" />
      <div class="right">
        <p>篱笆墙后台运营系统</p>
        <div class="content" ref="content">
          <div class="input-top input">
            <span>账号：</span
            ><input
              name="user"
              size="small"
              placeholder="请输入账号名称"
              style="
                display: inline-block;
                width: 250px;
                height: 30px;
                margin-bottom: 18px;
              "
            />
          </div>
          <div class="input-bottom input">
            <span>密码：</span
            ><input
              name="password"
              size="small"
              placeholder="请输入密码"
              style="
                display: inline-block;
                width: 250px;
                height: 30px;
                margin-bottom: 70px;
              "
              ref="css"
            />
          </div>
          <a-button type="primary" style="width: 345px" @click="submit">
            提交
          </a-button>
          <router-link to="/index">提交</router-link>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script src="../../js/flexible.js"></script>
<script>
export default {
  methods: {
    submit() {
      const content = this.$refs.content;
      const input = content.children;
      content.removeChild(input[2]);
      console.log(input[1].children);
      const inputVal = input[1].children;
      input[1].removeChild(inputVal[0]);
      console.log(input[0].children);
      const inputInfo = input[0].children;
      input[0].removeChild(inputInfo[0]);
      console.log(inputInfo[0].value);
      const getForm = function () {
        // 获取相对应的值
        const uName = inputInfo[0].value,
          pwd = inputVal[0].value;
        // 返回到函数外部，key：value 变量，当key等于value值时，可用简写，直接写key名即可
        return { uName, pwd };
      };
      const info = getForm();
      console.log(info);
      this.$axios
        .post("/login", info)
        .then((res) => {
          console.log(res);
          // 获取数据
        })
        .catch((err) => {
          console.error(err);
        });
        setTimeout(function(){
          location.href='/index'
        })
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 115.5px;
}
.img-top {
  margin-left: 0.6527rem;
  margin-top: 0.424rem;
  width: 2.214rem;
  height: 0.6931rem;
}

.img-bottom {
  margin-left: 1.3459rem;
  margin-top: 0.572rem;
  width: 4.7308rem;
  height: 3.9098rem;
}

.bottom {
  display: flex;
}

.input {
  display: flex;
}

.right {
  margin-top: 0.4762rem;
}
p {
  margin-left: 200px;
  margin-bottom: 0px;
  margin-top: 0.4762rem;
  width: 2.8052rem;
  height: 0.4675rem;
  color: rgba(0, 186, 178, 100);
  font-size: 28px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
.content {
  margin-left: 1.0043rem;
  margin-top: 0.2165rem;
  padding-top: 0.8658rem;
  width: 4.4242rem;
  height: 3.1169rem;
  line-height: 0.1732rem;
  border-radius: 0.0433rem;
  background-color: rgba(247, 255, 253, 100);
  text-align: center;
  box-sizing: border-box;
}

.input span {
  /* margin-top: 0.7359rem; */
  margin-left: 0.6926rem;
  margin-right: 0.4589rem;
}

input {
  width: 200px;
}
</style>